<template>
    <div class="editor-container">
        <div class="gutter">
            <div class="gutter-row">1</div>
        </div>
        <div class="content" contenteditable="true">
            <div class="line" ref="line"></div>
        </div>
        <div class="cursor-layer">
            <div class="cursor"></div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, getCurrentInstance } from 'vue';

const { proxy }: any = getCurrentInstance();

onMounted(() => {
    console.log(proxy.$refs.line);
    window.addEventListener('keydown', (e) => {
        console.log(e);
        window.addEventListener('keyup', () => {
            window.removeEventListener('keyup', () => {
                console.log(111);
            });
        });
    });
});
</script>

<style lang="scss" scoped>
.editor-container {
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;

    .gutter {
        display: flex;
        flex-direction: column;

        .gutter-row {
            @include flex.display-flex;
            align-items: center;
            justify-content: flex-end;
            min-width: 32px;
            min-height: var(--height-small);
        }
    }

    div[contenteditable] {
        border: none;
        outline: none;
        // -webkit-user-modify: read-write-plaintext-only;
    }

    .content {
        @include flex.flex(1);

        .line {
            @include flex.display-flex;
            align-items: center;
            width: 100%;
            height: var(--height-small);
        }
    }

    .cursor-layer {
        position: absolute;
        top: 0;
        left: 32px;
        z-index: 150;
        animation-duration: 1200ms;
        animation-name: blink;
        animation-timing-function: step-start;
        animation-iteration-count: infinite;

        @keyframes blink {
            50% {
                opacity: 0;
            }
        }

        .cursor {
            position: absolute;
            left: 0;
            top: 1px;
            height: 18px;
            padding-left: 2px;
            border-left: 1px solid #000000;
        }
    }
}
</style>
